<template>
  <div style="width: 100%;height: 500px;" ref="barchart"></div>
</template>
<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: '基础柱状图',
          subtext: 'Fake Data',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  methods: {
    generateChart() {
      this.$echarts.init(this.$refs.barchart).setOption(this.option)
    }
  },
  mounted() {
    this.generateChart()
  }
}
</script>